
<template>
  <!-- 季度选择时间控件 -->
  <div class="quarterDatepickerBox" :ref="quarterDatepickerRef">
    <span class="inputBox posR">
      <mark
        style="
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0);
          z-index: 999;
        "
        v-show="showSeason"
        @click.stop="showSeason = false"
      ></mark>
      <el-input
        :placeholder="
          disabled || configDefault.readonly
            ? ''
            : configDefault.placeholderLabel
        "
        :disabled="disabled"
        :clearable="configDefault.clearable"
        v-model="childModel"
        @focus="showSeason = true"
      >
        <i slot="prefix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-card
        class="box-card"
        style="
          width: 322px;
          padding: 0 3px 20px;
          position: absolute;
          top: 40px;
          left: 0;
          z-index: 9999;
        "
        v-show="showSeason"
      >
        <div slot="header" class="firstBtn">
          <button
            type="button"
            aria-label="前一年"
            class="
              el-picker-panel__icon-btn
              el-date-picker__prev-btn
              el-icon-d-arrow-left
            "
            :class="{ 'icon-btn-disabled': this.disabledList.prevDisabled }"
            :disabled="this.disabledList.prevDisabled"
            @click="prev"
          ></button>
          <span role="button" class="el-date-picker__header-label"
            >{{ currentSelectYear }}年</span
          >
          <button
            type="button"
            aria-label="后一年"
            class="
              el-picker-panel__icon-btn
              el-date-picker__next-btn
              el-icon-d-arrow-right
            "
            :class="{ 'icon-btn-disabled': this.disabledList.nextDisabled }"
            :disabled="this.disabledList.nextDisabled"
            @click="next"
          ></button>
        </div>
        <div class="text container">
          <!--  如下，绑定class,disabled为禁止选择的时间的设置 -->
          <el-button
            type="text"
            size="medium"
            :class="{
              colorDefalut: !this.disabledList.disabled1,
              colorDis: this.disabledList.disabled1,
              fontSelect:
                (this.currentYear == this.currentSelectYear &&
                  this.currentSeason == 1) ||
                (this.yearVal == this.currentSelectYear && this.seasonVal == 1),
              fontBold:
                this.currentYear == this.currentSelectYear &&
                this.currentSeason == 1,
            }"
            :disabled="this.disabledList.disabled1"
            style="width: 47%; float: left"
            @click="selectSeason(0)"
            >第一季度</el-button
          >
          <el-button
            type="text"
            size="medium"
            :class="{
              colorDefalut: !this.disabledList.disabled2,
              colorDis: this.disabledList.disabled2,
              fontSelect:
                (this.currentYear == this.currentSelectYear &&
                  this.currentSeason == 2) ||
                (this.yearVal == this.currentSelectYear && this.seasonVal == 2),
              fontBold:
                this.currentYear == this.currentSelectYear &&
                this.currentSeason == 2,
            }"
            :disabled="this.disabledList.disabled2"
            style="width: 47%; float: right"
            @click="selectSeason(1)"
            >第二季度</el-button
          >
        </div>
        <div class="item container" style="text-align: center">
          <el-button
            type="text"
            size="medium"
            :class="{
              colorDefalut: !this.disabledList.disabled3,
              colorDis: this.disabledList.disabled3,
              fontSelect:
                (this.currentYear == this.currentSelectYear &&
                  this.currentSeason == 3) ||
                (this.yearVal == this.currentSelectYear && this.seasonVal == 3),
              fontBold:
                this.currentYear == this.currentSelectYear &&
                this.currentSeason == 3,
            }"
            :disabled="this.disabledList.disabled3"
            style="width: 47%; float: left"
            @click="selectSeason(2)"
            >第三季度</el-button
          >
          <el-button
            type="text"
            size="medium"
            :class="{
              colorDefalut: !this.disabledList.disabled4,
              colorDis: this.disabledList.disabled4,
              fontSelect:
                (this.currentYear == this.currentSelectYear &&
                  this.currentSeason == 4) ||
                (this.yearVal == this.currentSelectYear && this.seasonVal == 4),
              fontBold:
                this.currentYear == this.currentSelectYear &&
                this.currentSeason == 4,
            }"
            :disabled="this.disabledList.disabled4"
            style="width: 47%; float: right"
            @click="selectSeason(3)"
            >第四季度</el-button
          >
        </div>
      </el-card>
    </span>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "quarterDatepicker",
  props: {
    quarterDatepickerRef: {
      type: String,
      default() {
        return "vueQuarterDatepicker";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组季度框
      type: [String, Number],
      default() {
        return 1;
      },
    },
    disabled: {
      // 当前组件是否禁用
      type: Boolean,
      default() {
        return false;
      },
    },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
    valueArr: {
      type: Array,
      default: () => {
        return ["1", "2", "3", "4"];
      },
    },
    getValue: {
      default: (val) => {
        return val;
      },
      type: Function,
    },
  },
  data() {
    return {
      configDefault: {
        clearable: true, // 是否显示清除按钮
        valueFormat: "yyyy q",
        format: "yyyy 年 第q季度",
        minTime: null,
        maxTime: null,
        placeholderLabel: "",
      },
      showSeason: false,
      seasonVal: "",
      seasonText: ["第一季度", "第二季度", "第三季度", "第四季度"],
      yearVal: "", // input显示时间，用户所选时间的年份
      currentSelectYear: "",
      currentYear: XEUtils.toNumber(
        XEUtils.toDateString(XEUtils.getWhatYear(new Date()), "yyyy")
      ), // 当前年份，不变
      currentMonth: XEUtils.toNumber(
        XEUtils.toDateString(XEUtils.getWhatMonth(new Date()), "MM")
      ), // 当前月份，不变
      currentSeason: "",
      childModel: "",
      beforeyear: null, // 默认显示上一季度所在年份，可能是去年
      disabledList: {
        disabled1: false,
        disabled2: false,
        disabled3: false,
        disabled4: false,
        prevDisabled: false,
        nextDisabled: false,
      },
    };
  },
  created() {
    this.getDetaultSeason();
    let formConfigObj = this.formConfigData
      ? this.formConfigData[this.fromSource] ||
        this.formConfigData[this.modelKey]
      : {};
    let publicConfigObj = this.formConfigData
      ? this.formConfigData["publicAttr"]
      : {};
    let cfg =
      this.config && XEUtils.isString(this.config)
        ? XEUtils.toStringJSON(this.config)
        : this.config || {};
    this.configDefault = XEUtils.merge(
      this.configDefault,
      publicConfigObj,
      cfg,
      formConfigObj
    );
    this.currentSelectYear = this.currentYear;
    if (this.model) {
      //初始化默认赋值
      let value = this.model;
      this.seasonVal = XEUtils.toNumber(value.slice(5, 6));
      this.yearVal = XEUtils.toNumber(value.slice(0, 4));
      this.childModel = `${this.yearVal} 年 ${
        this.seasonText[this.seasonVal - 1]
      }`;
    }
  },
  mounted() {
    // 每次挂载时都对组件进行重置，那么就不需要在上级组件中进行重置
  },
  watch: {
    childModel: function (val) {
      this.$emit("update:model", val);
    },
    model(val) {
      // if (val !== this.childModel) {
      this.childModel = val;
      // }
    },
    currentSelectYear(val) {
      this.loadDisabledData();
    },
  },
  methods: {
    loadDisabledData() {
      let minYearVal = this.configDefault.minTime
        ? XEUtils.toNumber(this.configDefault.minTime.slice(0, 4))
        : null;
      let minSeasonVal = this.configDefault.minTime
        ? XEUtils.toNumber(this.configDefault.minTime.slice(5, 6))
        : null;
      let maxYearVal = this.configDefault.maxTime
        ? XEUtils.toNumber(this.configDefault.maxTime.slice(0, 4))
        : null;
      let maxSeasonVal = this.configDefault.maxTime
        ? XEUtils.toNumber(this.configDefault.maxTime.slice(5, 6))
        : null;
      if (this.configDefault.minTime == null && this.configDefault.maxTime) {
        this.disabledList.nextDisabled = maxYearVal <= this.currentSelectYear;
        this.disabledList.disabled1 = maxYearVal < this.currentSelectYear;
        this.disabledList.disabled2 =
          (maxYearVal == this.currentSelectYear && maxSeasonVal < 2) ||
          maxYearVal < this.currentSelectYear;
        this.disabledList.disabled3 =
          (maxYearVal == this.currentSelectYear && maxSeasonVal < 3) ||
          maxYearVal < this.currentSelectYear;
        this.disabledList.disabled4 =
          (maxYearVal == this.currentSelectYear && maxSeasonVal < 4) ||
          maxYearVal < this.currentSelectYear;
      } else if (
        this.configDefault.minTime &&
        this.configDefault.maxTime == null
      ) {
        this.disabledList.prevDisabled = minYearVal >= this.currentSelectYear;
        this.disabledList.disabled1 =
          (minYearVal == this.currentSelectYear && minSeasonVal > 1) ||
          minYearVal > this.currentSelectYear;
        this.disabledList.disabled2 =
          (minYearVal == this.currentSelectYear && minSeasonVal > 2) ||
          minYearVal > this.currentSelectYear;
        this.disabledList.disabled3 =
          (minYearVal == this.currentSelectYear && minSeasonVal > 3) ||
          minYearVal > this.currentSelectYear;
        this.disabledList.disabled4 = minYearVal > this.currentSelectYear;
      } else if (this.configDefault.minTime && this.configDefault.maxTime) {
        this.disabledList.prevDisabled = minYearVal >= this.currentSelectYear;
        this.disabledList.nextDisabled = maxYearVal <= this.currentSelectYear;
        this.disabledList.disabled1 =
          (minYearVal == this.currentSelectYear && minSeasonVal > 1) ||
          minYearVal > this.currentSelectYear ||
          maxYearVal < this.currentSelectYear;
        this.disabledList.disabled2 =
          (maxYearVal == this.currentSelectYear && maxSeasonVal < 2) ||
          (minYearVal == this.currentSelectYear && minSeasonVal > 2) ||
          minYearVal > this.currentSelectYear ||
          maxYearVal < this.currentSelectYear;
        this.disabledList.disabled3 =
          (maxYearVal == this.currentSelectYear && maxSeasonVal < 3) ||
          (minYearVal == this.currentSelectYear && minSeasonVal > 3) ||
          minYearVal > this.currentSelectYear ||
          maxYearVal < this.currentSelectYear;
        this.disabledList.disabled4 =
          (maxYearVal == this.currentSelectYear && maxSeasonVal < 4) ||
          minYearVal > this.currentSelectYear ||
          maxYearVal < this.currentSelectYear;
      } else {
        XEUtils.objectEach(this.disabledList, (item, key) => {
          this.disabledList[key] = false;
        });
      }
    },
    one() {
      this.showSeason = false;
    },
    prev() {
      this.currentSelectYear = this.currentSelectYear * 1 - 1;
    },
    next() {
      this.currentSelectYear = this.currentSelectYear * 1 + 1;
    },
    selectSeason(i) {
      this.yearVal = this.currentSelectYear;
      this.seasonVal = i + 1;
      let newVal = this.getValue(this.yearVal + " " + this.valueArr[i]);
      this.childModel = `${this.currentSelectYear} 年 ${this.seasonText[i]}`;
      this.showSeason = false;
      // 每次选择时间都将当前选择时间发送到父组件
      this.$emit("changeCallback", this.modelKey + "_" + this.which, newVal);
    },
    getDetaultSeason() {
      //默认获取当前季度
      let year = this.currentYear;
      if (this.currentMonth <= 3) {
        year -= 1;
        this.currentSeason = 1;
      } else if (this.currentMonth > 3 && this.currentMonth <= 6) {
        this.currentSeason = 2;
      } else if (this.currentMonth > 6 && this.currentMonth <= 9) {
        this.currentSeason = 3;
      } else if (this.currentMonth > 9 && this.currentMonth <= 12) {
        this.currentSeason = 4;
      }
      //默认当前季度及上一季度所在年份
      this.beforeyear = year;
    },
    getDefaultTime() {
      this.getDetaultSeason();
      // 获取默认的上一个季度
      var seasonInd = null;
      if (this.currentMonth <= 3) {
        seasonInd = 3;
      } else if (this.currentMonth > 3 && this.currentMonth <= 6) {
        seasonInd = 0;
      } else if (this.currentMonth > 6 && this.currentMonth <= 9) {
        seasonInd = 1;
      } else if (this.currentMonth > 9 && this.currentMonth <= 12) {
        seasonInd = 2;
      }
      this.childModel = `${this.beforeyear} 年 ${this.seasonText[seasonInd]}`;
    },
  },
};
</script>

<style lang="less" scoped>
.quarterDatepickerBox {
  span.inputBox {
    display: inline-block;
    width: 100%;
  }
  .firstBtn {
    height: 30px;
    line-height: 34px;
    width: 100%;
    text-align: center;
  }
  .text {
    text-align: center;
    margin: 15px 0 10px;
  }
  .item {
    text-align: center;
  }
}
.fontSelect,
.colorDefalut.el-button--text:hover {
  color: #1890ff !important;
}
.colorDefalut {
  color: #606266;
}
.colorDis {
  color: #c0c4cc;
}
</style>
<style lang="less">
.quarterDatepickerBox {
  .el-card__header {
    padding: 12px;
  }
  .icon-btn-disabled {
    cursor: default;
    color: #bdbdbd;
  }
}
</style>